<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业2</title>
		<style>
					  body{
						  margin: 20px;
					  }
					  button{
						  margin: 0px 5px;
						  padding: 20px;
						  background-color: #d3d3d3;
						  border: 0px;
						  width: 90px;
					  }
					 #tab{
						  width: 500px;
						  height: 300px;
						  background-color: #ffdf3c;
						  margin-left:6px;
						  text-align: center;
						  line-height: 300px;
						 }
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button id="tab1">tab01</button>
		<button id="tab2">tab02</button>
		<button id="tab3">tab03</button>
		<div id="tab">tab文字内容一</div>
		<script>
		            $("#tab1").click(function(){
		                $("#tab").text("tab文字内容一");
		                $("#tab1").css("background-color","#ffff00");
		                $("#tab2").css("background-color","#c8c8c8");
		                $("#tab3").css("background-color","#c8c8c8");
		            });
		            $("#tab2").click(function(){
		                $("#tab").text("tab文字内容二");
		                $("#tab1").css("background-color","#c8c8c8");
		                $("#tab2").css("background-color","#ffff00");
		                $("#tab3").css("background-color","#c8c8c8");
		            });
		            $("#tab3").click(function(){
		                $("#tab").text("tab文字内容三");
		                $("#tab1").css("background-color","#c8c8c8");
		                $("#tab2").css("background-color","#c8c8c8");
		                $("#tab3").css("background-color","#ffff00");
		            });
		        </script>

	</body>
</html>